<template>
  <a-card>
    <div class="ant-card-head-wrapper">
      <div class="ant-card-head-title">
        <span class="title">区域</span>
        <span class="subtitle">数据时间：{{dataDate}}</span>
      </div>
      <div class="ant-card-extra">
        <a-button type="primary" @click="handleType('area')">查看详情<a-icon type="caret-right" /></a-button>
      </div>
    </div>
    <div class="card-content" style="height: 601px;">
      <a-card title="最喜爱室内区域" :bordered="false">
        <a-col span="10">
          <div ref="areaPieChart0" :style="{width:'100%',height:'200px'}"></div>
        </a-col>
        <a-col span="12">
          <div ref="areaLineChart0" :style="{width:'100%',height:'200px'}"></div>
        </a-col>
      </a-card>
      
      <a-card title="最喜爱户外区域" :bordered="false">
        <a-col span="10">
          <div ref="areaPieChart1" :style="{width:'100%',height:'200px'}"></div>
        </a-col>
        <a-col span="12">
          <div ref="areaLineChart1" :style="{width:'100%',height:'200px'}"></div>
        </a-col>
      </a-card>

      <a-card title="最喜爱专业活动室" :bordered="false">
        <a-col span="10">
          <div ref="areaPieChart2" :style="{width:'100%',height:'200px'}"></div>
        </a-col>
        <a-col span="12">
          <div ref="areaLineChart2" :style="{width:'100%',height:'200px'}"></div>
        </a-col>
      </a-card>
    </div>
  </a-card>
</template>
<script>
import { getAction } from '@/api/manage';

export default {
  name: 'area',
  data() {
    return {
      url: {
        stuList: 'management/skArea/getStudentFavoriteArea'
      },
      studentId: '',
      dataDate: '',
      nextDate: '',
      pageSize: 5,
    }
  },
  props:[],
  components: {},
  filters: {},
  
  computed: {},
  
  created() {
    this.dataDate = this.$skCommon.getDate(0)
    this.nextDate = this.$skCommon.getDate(0)
  },
  
  activated() {
  },

  mounted() {
    // this.load();
  },

  methods: {
    load(dataForm) {
      this.dataDate =  dataForm.dataDate
      this.nextDate =  dataForm.dataDate
      this.studentId = dataForm.studentId
      this.loadArea();
    },
    loadArea() {
      
      let params0 = {
        areaType: '0',//0室内，1室外，2专业活动区
        studentId: this.studentId,
        startDate: this.dataDate,
        endDate: this.nextDate
      }
      // 室内
      getAction(this.url.stuList, params0).then((res)=>{
        if(res.success){
          let pieData = []
          let categorys = [], xData1 = [], xData2 = []
          res.result.forEach(el => {
            const item = {
              name: el.areaName,
              value: el.duration
            }
            pieData.push(item)

            categorys.push(el.areaName)
            xData1.push(el.duration)
            xData2.push(el.studentTime)
          });
          this.initPieChartArea(this.$refs.areaPieChart0, pieData);
          this.initLineChartArea(this.$refs.areaLineChart0, categorys, xData1, xData2);
        } else {
          this.$message.warning(res.message);
        }
      }).catch(()=>{
      })

      let params1 = {
        areaType: '1',//0室内，1室外，2专业活动区
        studentId: this.studentId,
        startDate: this.dataDate,
        endDate: this.nextDate
      }
      // 室外
      getAction(this.url.stuList, params1).then((res)=>{
        if(res.success){
          let pieData = []
          let categorys = [], xData1 = [], xData2 = []
          res.result.forEach(el => {
            const item = {
              name: el.areaName,
              value: el.duration
            }
            pieData.push(item)

            categorys.push(el.areaName)
            xData1.push(el.duration)
            xData2.push(el.studentTime)
          });
          this.initPieChartArea(this.$refs.areaPieChart1, pieData);
          this.initLineChartArea(this.$refs.areaLineChart1, categorys, xData1, xData2);
        } else {
          this.$message.warning(res.message);
        }
      }).catch(()=>{
      })
      let params2 = {
        areaType: '2',//0室内，1室外，2专业活动区
        studentId: this.studentId,
        startDate: this.dataDate,
        endDate: this.nextDate
      }
      // 专业活动室
      getAction(this.url.stuList, params2).then((res)=>{
        if(res.success){
          let pieData = []
          let categorys = [], xData1 = [], xData2 = []
          res.result.forEach(el => {
            const item = {
              name: el.areaName,
              value: el.duration
            }
            pieData.push(item)

            categorys.push(el.areaName)
            xData1.push(el.duration)
            xData2.push(el.studentTime)
          });
          this.initPieChartArea(this.$refs.areaPieChart2, pieData);
          this.initLineChartArea(this.$refs.areaLineChart2, categorys, xData1, xData2);
        } else {
          this.$message.warning(res.message);
        }
      }).catch(()=>{
      })
    },
    initPieChartArea(el, pieData) {
      var myChartSports;
      if(this.$echarts.getInstanceByDom(el)) {
        myChartSports = this.$echarts.getInstanceByDom(el)
      }
      else{
        myChartSports = this.$echarts.init(el)
      }
      var colorList = ['#73DDFF', '#73ACFF', '#FDD56A', '#FDB36A', '#FD866A', '#9E87FF', '#58D5FF']
      let option = {
        tooltip: {
          trigger: 'item',
          backgroundColor: 'rgba(0,0,0,0.5)',
          textStyle: {
            // 文字提示样式
            color: '#fff',
            fontSize: '12'
          },
          borderColor: 'transparent',
          formatter: '{b0}: {c0}分钟<br />占比：{d}%'
        },
        series: [
          {
            type: 'pie',
            center: ['50%', '50%'],
            radius: ['40%', '60%'],
            clockwise: true,
            avoidLabelOverlap: true,
            itemStyle: {
              normal: {
                color: function(params) {
                  return colorList[params.dataIndex]
                }
              }
            },
            emphasis: {
              scale: true,
              scaleSize: 15
            },
            label: {
              show: true,
              // color: 'inherit',
              position: 'outer',
              formatter: '{b}\n{d}%',
            },
            data: pieData
          }
        ]
      }
      myChartSports.setOption(option)
      window.addEventListener('resize', () => {
        myChartSports.resize()
      })
    },
    initLineChartArea(el, categorys, xData1, xData2) {
      var myChartSports;
      if(this.$echarts.getInstanceByDom(el)) {
        myChartSports = this.$echarts.getInstanceByDom(el)
      }
      else{
        myChartSports = this.$echarts.init(el)
      }
      var legendTitle = ['时间(分钟)', '频次'];

      // option
      let optionSports = {
        backgroundColor: '#fff',
        tooltip: {
          borderColor: 'transparent',
          trigger: 'axis',
          backgroundColor: 'rgba(0,0,0,0.5)',
          axisPointer: {
            type: 'shadow',
            label: {
              show: true,
              backgroundColor: '#333'
            }
          },
          textStyle: {
            align: 'left',
            color: '#fff',
            fontSize: '12'
          }
        },
        grid: {
          left: '10%',
          top: '15%',
          right: '10%',
          bottom: '10%'
        },
        xAxis: {
          data: categorys,
          axisLine: {
            lineStyle: {
              color: '#666'
            }
          }
        },
        yAxis: [
          {
            name: legendTitle[0],
            splitLine: {
              show: false
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#999'
              }
            },
            nameTextStyle: {
              color: '#999'
            },
            splitArea: {
              show: false
            }
          },
          {
            name: legendTitle[1],
            splitLine: {
              show: false
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#999'
              }
            },
            nameTextStyle: {
              color: '#999'
            },
            splitArea: {
              show: false
            }
          },
        ],
        series: [
          {
            name: legendTitle[0],
            type: 'line',
            smooth: true,
            showAllSymbol: true,
            symbol: 'emptyCircle',
            symbolSize: 8,
            itemStyle: {
              normal: {
                color: '#0BA6E3',
                label : {
                  show: true // 显示数据
                },
              }
            },
            data: xData1
          },
          {
            name: legendTitle[1],
            type: 'bar',
            barWidth: 10,
            yAxisIndex: 1,
            itemStyle: {
              normal: {
                // barBorderRadius: 5,
                color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#0CDF8A'
                  },
                  {
                    offset: 1,
                    color: '#3EACE5'
                  }
                ]),
                label : {
                  show: true // 显示数据
                },
              }
            },
            data: xData2
          },
        ]
      }

      myChartSports.setOption(optionSports);
      window.addEventListener("resize", ()=>{
        myChartSports.resize();
      })
    },
    handleType(type){
      this.$emit('detail', type)
    },
  }
}
</script>
<style scoped lang="less">

</style>